<template>
  <div class="login">
    <div class="container-login100">
      <div class="wrap-login100">
        <div class="login100-pic js-tilt" data-tilt>
          <img src="@/styles/login/img/img-01.png" alt="IMG">
        </div>

        <form class="login100-form validate-form">
				<span class="login100-form-title">
					用户登陆
				</span>

          <div class="wrap-input100 validate-input">
            <input class="input100" type="text" name="username" v-model="loginForm.username" placeholder="用户名">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
						<i class="fa fa-user" aria-hidden="true"></i>
					</span>
          </div>

          <div class="wrap-input100 validate-input">
            <input class="input100" type="password" name="password" v-model="loginForm.password" placeholder="密码">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
						<i class="fa fa-lock" aria-hidden="true"></i>
					</span>
          </div>

          <div class="container-login100-form-btn">
            <button type="button" class="login100-form-btn" @click="handleLogin">
              登陆
            </button>
          </div>

          <div class="text-center p-t-12">
<!--            <a class="txt2" href="javascript:">-->
<!--              忘记密码？-->
<!--            </a>-->
          </div>

          <div class="text-center p-t-136">
<!--            <a class="txt2" href="#">-->
<!--              还没有账号？立即注册-->
<!--              <i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>-->
<!--            </a>-->
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
    import {validUsername} from "@/utils/validate";
    import {error, isEmpty, isNotEmpty} from "@/utils/index"
    export default {
        name: "login",
        data() {
          return {
            loginForm: {
              username: 'admin',
              password: '111111'
            },
            redirect: undefined
          }
        },
        watch: {
          $route: {
            handler: function(route) {
              this.redirect = route.query && route.query.redirect
            },
            immediate: true
          }
        },
        methods: {
          handleLogin() {
            if(isNotEmpty(this.loginForm.username)&&isNotEmpty(this.loginForm.password)){
              this.loading = true
              this.$store.dispatch('user/login', this.loginForm).then(() => {
                this.$router.push({ path: this.redirect || '/' })
                this.loading = false
              }).catch(() => {
                this.loading = false
              })
            }else{
              error('请完善登陆信息！')
            }
          }
        }
      }
</script>


<style scoped src="@/styles/login/css/font-awesome.min.css"/>
<style scoped src="@/styles/login/css/main.css"/>
<style scoped src="@/styles/login/css/util.css"/>
<style scoped>

</style>
